<template>
  <div class="head">
    <div class="tit">
      <button class="tex1">汇总</button>
    </div>
    <div class="line" />
    <el-row>
      <el-col :span="24">
        <div class="title1">
          <el-form ref="form" :rules="rules" style="margin: 24px 0;" :model="form" label-width="80px">
            <div class="formtop">
              <div style="display: flex;justify-content: space-between;flex-wrap: wrap;width: 1600px;">
                <el-form-item class="text" label="日期" prop="value">
                  <el-date-picker v-model="form.value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 690px" @change="changeTime" />
                </el-form-item>
                <el-form-item class="text" label="网点">
                  <el-select v-model="form.networkName" :disabled="true" placeholder="辽宁盘锦公司" style="width: 286px;" />
                </el-form-item>
                <el-form-item class="text" label="展示维度" prop="collectType">
                  <el-select v-model="form.collectType" class="input" placeholder="请选择" style="width: 286px;">
                    <el-option label="按天" value="1" />
                    <el-option label="按时间段" value="2" />
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                  <elbutton :obj="form" @dj="khClear" />
                </el-form-item>
              </div>
            </div>
            <div class="title1">
              <el-form-item class="text" label="平台类型">
                <el-select v-model="form.platType" class="input" placeholder="请选择" style="width: 286px;" @change="changeType">
                  <el-option label="蜂巢快递柜面单使用账单" value="1" />
                  <el-option label="快宝面单" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="onSubmit"><i class="el-icon-upload2" />导出</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <elltable :loading="loading" :data="tableData" :th="th">

          <div style="display: flex;justify-content: space-between;margin-top: 51px;">
            <div class="title2" />
            <div class="block" style="display: flex; justify-content: flex-end">
              <pagination background :current-page="current" :page-size="10" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
        </elltable>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { RichNestApi } from '@/api/HqFinancePanel'
export default {

  components: {},
  data() {
    return {
      rules: {
        collectType: [
          { required: true, message: '请选择汇总类型', trigger: 'change' }
        ],
        value: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ]
      },
      th: [],
      loading: false,
      value: '', // 选择的时间
      value1: '1', // 平台类型
      form: {
        collectType: '',
        endTime: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        platType: '1',
        startTime: ''
      },
      tableData: [],
      current: 0, // 页数
      pages: 0, // 条数
      total: 0 // 总数
    }
  },
  methods: {
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val
      this.onSubmit()
    },
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val
      this.onSubmit()
    },
    // 选择时间
    changeTime(value) {
      if (value != null) {
        this.form.startTime = value[0]
        this.form.endTime = value[1]
      } else {
        this.form.startTime = ''
        this.form.endTime = ''
      }
    },
    table(res) {
      this.tableData = res.data.list.data
      this.total = res.data.list.total
      this.current = res.data.list.current
      this.pages = res.data.list.pages
      this.th = res.data.fields
    },
    // 查询
    async onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true

          const res = await RichNestApi(this.form)
          this.loading = false

          console.log(res)
          if (res.code === 200) {
            this.table(res)
          }
          this.loading = false
        } else {
          return false
        }
      })
    },
    // 重置
    khClear(aaa) {
      this.form = aaa
      this.form.platType = '1'
    },
    changeType() {
      this.tableData = []
    }
  }
}

</script>
<style
  scoped
  lang="scss"
>
.tit {
  display: flex;

  .tex1 {
    margin-right: 48px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    background: #fff;
    border: 1px #fff solid;
  }

  .active {
    font-family: Source Han Sans CN;
    font-weight: 700;
    color: #2087d0;
    position: relative;
  }

  .active::before {
    position: absolute;
    content: "";
    width: 62px;
    height: 2px;
    background: #2087d0;
    border-radius: 1px;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%);
  }
}

.head {
  padding: 30px;
}

.title {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  margin-top: 20px;
}

.line {
  height: 1px;
  background: #d8d8d8;
  border-radius: 1px;
  margin-top: 19px;
}
.formtop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title1 {
  display: flex;
  justify-content: space-between;
  .text {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;

    .input {
      width: 286px;
      height: 36px;
      background: #ffffff;
      border-radius: 4px;
    }

    .input1 {
      width: 708px;
      height: 36px;
      background: #ffffff;
      border: 1px solid #b4b4b4;
      border-radius: 4px;
    }
  }
}

.title2 {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}
</style>
